<!doctype html><html lang="en"><head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    <!-- Bootstrap CSS -->    <!-- <link rel="stylesheet" href="bootstrap4/dist/css/bootstrap.css">    <link rel="stylesheet" href="ycss/header.css">    <link rel="stylesheet" href="ycss/banner.css">    <link rel="stylesheet" href="ycss/center.css">    <link rel="stylesheet" href="ycss/bottom.css">    <link rel="stylesheet" href="ycss/xqy.css"> -->    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>    <style>        body{            min-width: 580px;            background-color: #FFFFFF;        }    </style>    <title>bootstrap 4</title><script defer src="js/details.js"></script><link href="css/details.css" rel="stylesheet"></head><body><!--导航条--><div class="head" style="display: flex">    <nav class=" navbar navbar-expand-lg navbar-light container" style="padding: 0 15px">        <a class="navbar-brand" href="#">            <img src="" width="100px"/>        </a>        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">            <span class="navbar-toggler-icon" ></span>        </button>        <div class="collapse navbar-collapse" id="navbarNavDropdown">            <ul class="hd navbar-nav col-lg-9" id="hd">                <li class="nav-item ">                    <a class="nav-link" href="index.html" >首页</a>                </li>                <li class=" nav-item">                    <a class="nav-link" href="#">关于我们</a>                </li>                <li class=" nav-item">                    <a class="nav-link" href="#" >畅销榜单</a>                </li>                <li class=" nav-item dropdown">                    <a class="nav-link" href="#">全部商品</a>                </li>                <li class=" nav-item">                    <a class="nav-link" href="#">新闻资讯</a>                </li>            </ul>            <ul  class="d-flex flex-row form-inline my-3 my-lg-0 navbar-nav" id="nav-right">                <li class=" nav-item">                    <a href="login.html" style="text-decoration: none;color: black"><img  src="" alt="" width="25px">                        <span id="dr"  class="dr">登录</span><span id="cle" style=" vertical-align: middle;"></span></a>                </li>                <li class=" nav-item">                    <a href=""><img src="" alt="" width="22px"></a>                </li>                <li class=" nav-item">                    <a id="gwc" href="shopping.html"><img src="" alt="" width="22px"></a>                </li>            </ul>        </div>    </nav></div><!--主体内容--><div class="xq_ztq" >    <div  class="xq_nr  container " id="box"><!--        <div class="row">--><!--            &lt;!&ndash; 左边&ndash;&gt;--><!--            <div class="col-md-5 col-12">--><!--                <img src="" alt="" style="">--><!--            </div>--><!--            &lt;!&ndash;           右边&ndash;&gt;--><!--            <div class="col-md-7 col-12">--><!--                <div class="zl" >--><!--                    <h4>花漾保湿粉水 (10片)</h4>--><!--                    <p>配送:香港发货，香港直送时间为3-10个工作天</p>--><!--                    <p>服务:30日退换保证 正品保障 正品承诺</p>--><!--                    <p>花漾粉水 滋养肌肤</p>--><!--                </div>--><!--                &lt;!&ndash;               右边下面盒子&ndash;&gt;--><!--                <div class="zl_bottom">--><!--                    <span id="price" class="font-size-30" data-price='299.00' >¥299.00</span>--><!--                    <del class='m-l-20'>原价¥499.00元</del>--><!--                    <div class=" zl_bottom_g">--><!--                        <span style="margin: 0 0  1.12rem 0">规格：</span>--><!--                        <button type="button" class="btn btn-outline-dark">200ml</button>--><!--                        <div style="margin: 10px 0">--><!--                            <div class="con">--><!--                                <div class="room-number">--><!--                                    <p class="clearfix">--><!--                                        <span class="desc">数量:</span>--><!--                                        <span id="js" class="bd-box subtraction min">-</span>--><!--                                        <input id="sz" class="bd-box number-box" value="1" readonly="readonly"/>--><!--                                        <span id="zj" class="bd-box addition add">+</span>--><!--                                    </p>--><!--                                </div>--><!--                            </div>--><!--                        </div>--><!--                        <a href="" class="btn btn-lg btn-squared btn-danger m-r-20 product-tocart">购买</a>--><!--                        <a href="shopping.html" id="btn" class="btn btn-lg btn-squared btn-danger m-r-20 product-tocart">加入购物车</a>--><!--                    </div>--><!--                </div>--><!--            </div>-->        </div>        <!--    导航-->        <ul class="nav nav-tabs" id="myTab" role="tablist">            <li class="nav-item" role="presentation">                <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">产品介绍</a>            </li>            <li class="nav-item" role="presentation">                <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">成分介绍</a>            </li>            <li class="nav-item" role="presentation">                <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">使用方法</a>            </li>        </ul>        <div class="tab-content" id="myTabContent">            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">                ·质地细腻柔滑，泡沫丰富，能深入清洁面部污垢与残留彩妆，软化并调理肌肤角质，增添肌肤的光泽度与通透感。                ·特含珍珠精华与沙棘果提取物，帮助肌肤维持水分与脂质平衡，令肌肤清新舒爽，活力再现。</div>            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">                珍珠粉、沙棘果提取物、糖海带提取物、猴面包树果肉提取物、桃叶提取物            </div>            <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">                将面部湿润后，取适量于掌心，轻揉产生丰富泡沫，在面部打圈按摩，用清水洗净即可。避免进入眼睛。            </div>        </div>    </div></div><!--尾部--><div id="bottom" >    <div class="container">        <!--     上层盒子-->        <div class="bottom-top">            <!--         左边-->            <div class="row col-12">                <div class="bottom-top-left col-sm-12 col-lg-5 ">                    <div class="col-sm-8">                        <button  type="button" class="btn btn-outline-light">在线商城 &nbsp;&nbsp;></button>                        <p>联系方式</p>                        <p>159-5686-8888</p>                    </div>                    <div >                        <img class="col-4" src="" alt="" width="70%" style="max-width: 150px">                    </div>                </div>                <!--         右边-->                <div class="bottom-top-right col-sm-12   col-lg-7 ">                    <ul >                        <h5><a href="">个人护理</a></h5>                        <li><a href="">脸部护理</a></li>                        <li><a href="">头发护理</a></li>                        <li><a href="">全身护理</a></li>                        <li><a href="">滋养美白</a></li>                    </ul>                    <ul >                        <h5><a href="">健康美肌</a></h5>                        <li><a href="">营养品</a></li>                        <li><a href="">保健品</a></li>                        <li><a href="">美容仪</a></li>                        <li><a href="">胶原蛋白</a></li>                    </ul>                    <ul >                        <h5><a href="">化妆工具</a></h5>                        <li><a href="">化妆海绵</a></li>                        <li><a href="">彩妆套刷</a></li>                        <li><a href="">睫毛夹</a></li>                        <li><a href="">其他工具</a></li>                    </ul>                    <ul >                        <h5><a href="">香水</a></h5>                        <li><a href="">男士香水</a></li>                        <li><a href="">女士香水</a></li>                        <li><a href="">惠选套装</a></li>                    </ul>                </div>            </div>        </div>        <!--     下层盒子-->        <div style="text-align: center ;margin: 20px 0">            <div style="color: #adadad;">我的网站 版权所有 2008-2014 湘ICP备8888888</div>            <div style="color: #adadad;">爱米有限公司                地址：南昌市上海路555号 电话：021-23888666</div>            <div style="color: #adadad;">联系我们 : 400-820-5118, 800-820-5118  联系时间 : 周一至周日 09:00-21:00 (节假日休息)</div>            <div style="color: #adadad;">国家药监局提示您：请正确认识化妆品功效， 化妆品不能替代药品，不能治疗皮肤病等疾病。</div>        </div>    </div></div><!-- Optional JavaScript --><!-- jQuery first, then Popper.js, then Bootstrap JS --><!-- <script src="bootstrap4/dist/js/jquery.slim.min.js"></script> --><!--  可以用来实现  弹出框  下拉菜单  提示框功能  如果说不需要这些功能  可以直接引入bootstrap.min.js  很小 只有62k--><!--<script src="bootstrap4/dist/js/popper.min.js" ></script><script src="bootstrap4/dist/js/bootstrap.min.js"></script>--><!--如果 想要 popper的功能  可以直接引入 bundle.js 包含所有的功能--><!-- <script src="bootstrap4/dist/js/bootstrap.bundle.min.js"></script><script src="js/public.js"></script><script src="js/details.js"></script><script src="jq/jquery.min.js"></script> --><script src="../js/template-web.js"></script><script type="text/html" id="tem1">    {{each  list}}    <div class="row">        <!-- 左边-->        <div class="col-md-5 col-12">            <img src={{$value.src}} alt="">        </div>        <!--           右边-->        <div class="col-md-7 col-12">            <div class="zl">                <h4>{{$value.name}}</h4>                <p>配送:香港发货，香港直送时间为3-10个工作天</p>                <p>服务:30日退换保证 正品保障 正品承诺</p>                <p>花漾粉水 滋养肌肤</p>            </div>            <!--               右边下面盒子-->            <div class="zl_bottom">                <span id="price" class="font-size-30">{{$value.pic}}</span>                <del class='m-l-20'>原价¥499.00元</del>                <div class=" zl_bottom_g">                    <span style="margin: 0 0  1.12rem 0">规格：</span>                    <button type="button" class="btn btn-outline-dark">200ml</button>                    <div style="margin: 10px 0">                        <div class="con">                            <div class="room-number">                                <p class="clearfix">                                    <span class="desc">数量:</span>                                    <span id="js" class="bd-box subtraction min">-</span>                                    <input id="sz" class="bd-box number-box" value="1" readonly="readonly"/>                                    <span id="zj" class="bd-box addition add">+</span>                                </p>                            </div>                        </div>                    </div>                    <a href="" class="btn btn-lg btn-squared btn-danger m-r-20 product-tocart">购买</a>                    <a href="shopping.html" title={{$value.title}} id="btn" class="btn btn-lg btn-squared btn-danger m-r-20 product-tocart">加入购物车</a>                </div>            </div>        </div>    </div>    {{/each}}</script><script>    var ob=[        {src:"img/11.jpg", name:'保湿精华小棕瓶', sl:"0", pic:"￥559.00",title:"1",},        {src:"img/12.jpg", name:'蜂蜜面膜', sl:"0", pic:"￥159.00", title:"2", },        {src:"img/13.jpg", name:'花漾补水', sl:"0", pic:"￥259.00", title:"3",},        {src:"img/14.jpg", name:'洗面奶', sl:"0", pic:"￥79.00", title:"4", },    ]    var flag;    //数据生成    var n=localStorage['details'];    //将 函数整体作为参数进行执行    console.log(n); //序号    var ob1=[];    ob1.push(ob[n-1]);    var obj={        list:ob1,    }    console.log(obj);    var html=template("tem1",obj);    box.innerHTML=html;    var js=document.getElementById("js");    var zj=document.getElementById("zj");    var sz=document.getElementById("sz");    js.onclick=function () {        if (sz.value>1){            sz.value--;        }    }    zj.onclick=function () {        sz.value++;    }    var arr=[];    var str="";    var obj={};    var  txt=localStorage['tet']    var btn=document.getElementById("btn");    btn.onclick=function (e) {        var tp=this.parentElement.parentElement.parentElement.parentElement.firstElementChild.firstElementChild.getAttribute("src");        var name=this.parentElement.parentElement.parentElement.firstElementChild.firstElementChild;        var plice=this.parentElement.parentElement.firstElementChild;        var sl=this.previousElementSibling.previousElementSibling.firstElementChild.firstElementChild.firstElementChild.firstElementChild.nextElementSibling.nextElementSibling;        var pl=plice.innerHTML;        var na=name.innerHTML;        var bl=sl.value;        // 判断 如果有了key值就获取 没有 就设置为[]  这种情况出现在第一个人注册的时候        arr=localStorage.getItem(txt)?localStorage.getItem(txt):[];        // console.log(arr); //默认拿到的是字符串        if(arr.length!=0){ //有了第二个之后的  就会先拿到之前存的key值 然后转为数组            //将字符串转为数组            arr=JSON.parse(arr);        }        //装用户输入的信息        obj.src=tp;        obj.name=na;        obj.pwd=pl;        obj.sl=bl;        arr.push(obj); //如果不转数组 就会报错        console.log(arr);        str=JSON.stringify(arr); //转化为字符串        localStorage.setItem(txt,str);//以json的格式存放到local中        e.preventDefault()        if (localStorage['tet']!=null){            window.location.assign("shopping.html");        }else {            window.location.assign("login.html");        }    }</script></body></html>